<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="预定人">
                            <a-input placeholder="请输入预定人" v-model="queryParam.bookPerson"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="预定类型">
                            <j-dict-select-tag v-model="queryParam.bookType" placeholder="请选择预定类型"
                                dictCode="book_type" />
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="预抵店时间">
                            <a-range-picker @change="changeDateArrival" format="YYYY-MM-DD" style="width: 100%;" />
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="预离店时间">
                            <a-range-picker @change="changeDateDeparture" format="YYYY-MM-DD" style="width: 100%;" />
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="预定时间">
                            <a-range-picker @change="changeBookDate" format="YYYY-MM-DD" style="width: 100%;" />
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <a-form-item label="预订状态">
                            <j-multi-select-tag v-model="queryParam.bookStatus" placeholder="请选择预订状态"
                                dictCode="book_status" />
                        </a-form-item>
                    </a-col>

                    <a-col :xl="6" :lg="7" :md="8" :sm="24">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button type="primary" @click="searchReset" icon="reload"
                                style="margin-left: 8px">重置</a-button>
                            <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                                {{ toggleSearchStatus ? '收起' : '展开' }}
                                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                            </a> -->
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- 查询区域-END -->

        <!-- 操作按钮区域 -->
        <div class="table-operator">
            <a-button @click="handleAdd" type="primary" icon="plus">新增预订单</a-button>
            <!-- 高级查询区域 -->
            <j-super-query :fieldList="superFieldList" ref="superQueryModal"
                @handleSuperQuery="handleSuperQuery"></j-super-query>
            <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
                <a-menu slot="overlay">
                    <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
                </a-menu>
                <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
            </a-dropdown> -->
            <a-button @click="searchQuery" icon="reload" style="float: right;">刷新数据</a-button>
        </div>

        <!-- table区域-begin -->
        <div class="yudingdan-table">
            <div class="ant-alert ant-alert-info">
                <!-- <i class="anticon anticon-info-circle ant-alert-icon"></i> -->
                已选择
                <a style="font-weight: 600">
                    {{ selectedRowKeys.length }}
                </a>
                项
                <a style="margin-left: 24px" @click="onClearSelected" v-if="selectedRowKeys.length">
                    清空
                </a>

                <a-space style="float: right; margin-top: -6px;">
                    <a-button type="primary" icon="clock-circle" @click="handleAutoFenFang"
                        :disabled="topButtonDisable.autoFenFang">
                        自动分房
                    </a-button>
                    <a-button type="danger" @click="handleQuXiaoFenFang" :disabled="topButtonDisable.quXiaoFenFang">
                        取消分房
                    </a-button>
                    <a-button type="primary" @click="handleQueRenDingDan" :disabled="topButtonDisable.queRenDingDan">
                        确认订单
                    </a-button>
                    <a-button type="danger" @click="handleCheXiaoQueRen" :disabled="topButtonDisable.cheXiaoQueRen">
                        撤销确认
                    </a-button>
                    <a-divider type="vertical" />
                    <a-button type="danger" @click="handleQuXiaoDingDan" :disabled="topButtonDisable.quXiaoDingDan">
                        取消订单
                    </a-button>
                </a-space>
            </div>

            <a-table ref="table" size="middle" bordered rowKey="id" class="j-table-force-nowrap" :scroll="{ x: true }"
                :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
                @change="handleTableChange"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, }">
                <!-- :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
                <template slot="htmlSlot" slot-scope="text">
                    <div v-html="text"></div>
                </template>
                <!-- <template slot="imgSlot" slot-scope="text,record">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                    <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt=""
                        style="max-width:80px;font-size: 12px;font-style: italic;" />
                </template>
                <template slot="fileSlot" slot-scope="text">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
                    <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
                        下载
                    </a-button>
                </template> -->

                <span slot="action" slot-scope="text, record" style="display: flex; flex-direction: column;">
                    <a-space>
                        <a-button size="small" @click="handleShouKuan(record)" :disabled="buttonStatusShouKuan(record)"
                            style="border: 1px solid gray;">
                            预定收款
                        </a-button>
                        <a-button size="small" @click="handleFangJianCheck(record)"
                            :disabled="buttonStatusFangJianCheck(record)" style="border: 1px solid gray;">
                            分配房间
                        </a-button>
                    </a-space>
                    <a-space style="margin-top: 5px;">
                        <a-button size="small" @click="handleDetail(record)" style="border: 1px solid gray;">
                            详情
                        </a-button>
                        <a-tooltip>
                            <template slot="title">
                                <div v-if="buttonStatusEditAndDelete(record, '编辑')[1]">
                                    {{ buttonStatusEditAndDelete(record, '编辑')[0] }}
                                </div>
                            </template>
                            <a-button size="small" type="primary" @click="handleEdit(record)"
                                :disabled="buttonStatusEditAndDelete(record, '编辑')[1]">
                                编辑
                            </a-button>
                        </a-tooltip>

                        <a-tooltip>
                            <template slot="title">
                                <div v-if="buttonStatusEditAndDelete(record, '删除')[1]">
                                    {{ buttonStatusEditAndDelete(record, '删除')[0] }}
                                </div>
                            </template>
                            <a-button size="small" type="danger" @click="handleDeleteCheck(record)"
                                :disabled="buttonStatusEditAndDelete(record, '删除')[1]">
                                删除
                            </a-button>
                        </a-tooltip>
                    </a-space>
                </span>

            </a-table>
        </div>

        <YuDingGuanLiModal ref="modalForm" @ok="modalFormOk" />
        <YuDingGuanLiBaseModal ref="baseModal" @closeModal="loadData()">
            <component :is="checkModal" :yudingdan="openModel" />
        </YuDingGuanLiBaseModal>
    </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import YuDingGuanLiModal from './modules/YuDingGuanLiModal'
import YuDingGuanLiBaseModal from './YuDingGuanLiBaseModal'
import '@/assets/less/TableExpand.less'
import YuDingShouKuanList from './YuDingShouKuan/YuDingShouKuanList'
import YuDingFangJianList from './YuDingFangJian/YuDingFangJianList'
import { postAction } from '@/api/manage'

export default {
    name: "RoomBookInfoList",
    mixins: [JeecgListMixin],
    components: {
        YuDingGuanLiModal,
        YuDingGuanLiBaseModal,
        YuDingShouKuanList,
        YuDingFangJianList
    },
    data() {
        return {
            isorter: {
                column: 'bookCode',
                order: 'desc',
            },
            description: '预定单主信息管理页面',
            checkModal: null,
            // 表头
            columns: [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '预订单号',
                    align: "center",
                    dataIndex: 'bookCode'
                },
                {
                    title: '预订状态',
                    align: "center",
                    dataIndex: 'bookStatus_dictText'
                },
                {
                    title: '预定类型',
                    align: "center",
                    dataIndex: 'bookType_dictText'
                },
                {
                    title: '预定人',
                    align: "center",
                    dataIndex: 'bookPerson'
                },
                {
                    title: '预定时间',
                    align: "center",
                    dataIndex: 'bookDate'
                },
                {
                    title: '联系电话',
                    align: "center",
                    dataIndex: 'photo'
                },
                {
                    title: '最早来期',
                    align: "center",
                    dataIndex: 'dateArrival'
                },
                {
                    title: '最晚离期',
                    align: "center",
                    dataIndex: 'dateDeparture'
                },
                // {
                //     title: '房晚数',
                //     align: "center",
                //     dataIndex: 'dateNum'
                // },
                {
                    title: '预收金额',
                    align: "center",
                    dataIndex: 'receiptAmt'
                },
                // {
                //     title: '优惠理由',
                //     align: "center",
                //     dataIndex: 'discountReason'
                // },
                // {
                //     title: '备注',
                //     align: "center",
                //     dataIndex: 'remark'
                // },

                {
                    title: '房间分配',
                    align: "center",
                    dataIndex: 'roomFpDesc',
                    scopedSlots: { customRender: 'htmlSlot' }
                },
                // {
                //     title: '分配房间号',
                //     align: "center",
                //     dataIndex: 'roomFpCode',
                //     scopedSlots: { customRender: 'htmlSlot' }
                // },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    fixed: "right",
                    width: 147,
                    scopedSlots: { customRender: 'action' },
                }
            ],
            url: {
                list: "/room/roomBookInfo/list",
                delete: "/room/roomBookInfo/delete",
                deleteBatch: "/room/roomBookInfo/deleteBatch",
                exportXlsUrl: "/room/roomBookInfo/exportXls",
                importExcelUrl: "room/roomBookInfo/importExcel",

            },
            dictOptions: {},
            superFieldList: [],
            openModel: {},
            topButtonDisable: {
                autoFenFang: false,
                quXiaoFenFang: false,
                queRenDingDan: false,
                cheXiaoQueRen: false,
                quXiaoDingDan: false,
            },
        }
    },
    watch: {
        selectionRows: {
            handler(val) {
                this.changeTopButtonDisable(val);
            },
            deep: true
        },
        dataSource: {
            handler(val) {
                const newSelectRows = []
                for (let i of this.selectedRowKeys) {
                    for (let d of val) {
                        if (i === d.id) {
                            newSelectRows.push(d)
                        }
                    }
                }
                this.$nextTick(() => {
                    this.selectionRows = newSelectRows
                })

            },
            deep: true
        }
    },
    created() {
        this.getSuperFieldList();
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        },
        buttonStatusEditAndDelete() {
            // 编辑和删除只有再00状态可用
            return (record, text) => {
                if (record.bookStatus !== '00') {
                    return ['当前状态不可' + text, true]
                } else {
                    return ['', false]
                }
            }
        },
        buttonStatusShouKuan() {
            return (record) => {
                if (record.bookStatus === '00' || record.bookStatus === '10' || record.bookStatus === '20') {
                    return false
                } else {
                    return true
                }
            }
        },
        buttonStatusFangJianCheck() {
            return (record) => {
                if (record.bookStatus === '10' || record.bookStatus === '20') {
                    return false
                } else {
                    return true
                }
            }
        }
    },
    methods: {
        changeTopButtonDisable(val) {
            // 未选定任何一行，所有按钮不禁用
            if (val.length === 0) {
                this.topButtonDisable = {
                    autoFenFang: false,
                    quXiaoFenFang: false,
                    queRenDingDan: false,
                    cheXiaoQueRen: false,
                    quXiaoDingDan: false,
                }
            } else {
                // 有选定的时候，先不禁用所有，然后根据选定内容判断
                this.topButtonDisable = {
                    autoFenFang: false,
                    quXiaoFenFang: false,
                    queRenDingDan: false,
                    cheXiaoQueRen: false,
                    quXiaoDingDan: false,
                }
                if (val.some(item => item.bookStatus === '00')) {
                    // 选定内容里包含00状态，不能用：取消分房，撤销确认，自动分房
                    this.topButtonDisable.quXiaoFenFang = true
                    this.topButtonDisable.cheXiaoQueRen = true
                    this.topButtonDisable.autoFenFang = true
                }
                if (val.some(item => item.bookStatus === '10')) {
                    // 选定内容里包含10状态，不能用：取消分房，取消订单，确认订单
                    this.topButtonDisable.quXiaoFenFang = true
                    this.topButtonDisable.quXiaoDingDan = true
                    this.topButtonDisable.queRenDingDan = true
                }
                if (val.some(item => item.bookStatus === '20')) {
                    // 选定内容里包含20状态，不能用：取消订单，确认订单，取消确认，自动分房
                    this.topButtonDisable.quXiaoDingDan = true
                    this.topButtonDisable.queRenDingDan = true
                    this.topButtonDisable.cheXiaoQueRen = true
                    this.topButtonDisable.autoFenFang = true
                }
                if (val.some(item => item.bookStatus === '30')) {
                    // 选定内容里包含30状态，不能用：取消订单，确认订单，取消确认，自动分房
                    this.topButtonDisable.quXiaoDingDan = true
                    this.topButtonDisable.quXiaoFenFang = true
                    this.topButtonDisable.queRenDingDan = true
                    this.topButtonDisable.cheXiaoQueRen = true
                    this.topButtonDisable.autoFenFang = true
                }
                if (val.some(item => item.bookStatus === '99')) {
                    this.topButtonDisable = {
                        autoFenFang: true,
                        quXiaoFenFang: true,
                        queRenDingDan: true,
                        cheXiaoQueRen: true,
                        quXiaoDingDan: true,
                    }
                } else { }
            }
        },
        changeBookDate(dates, dateStrings) {
            this.queryParam.bookDate_begin = dateStrings[0]
            this.queryParam.bookDate_end = dateStrings[1]
        },
        changeDateArrival(dates, dateStrings) {
            this.queryParam.dateArrival_begin = dateStrings[0]
            this.queryParam.dateArrival_end = dateStrings[1]
        },
        changeDateDeparture(dates, dateStrings) {
            this.queryParam.dateDeparture_begin = dateStrings[0]
            this.queryParam.dateDeparture_end = dateStrings[1]
        },
        initDictConfig() {
        },
        getSuperFieldList() {
            let fieldList = [];
            fieldList.push({ type: 'string', value: 'bookCode', text: '预订单号', dictCode: '' })
            fieldList.push({ type: 'string', value: 'bookType', text: '预定类型(散客/团体)', dictCode: '' })
            fieldList.push({ type: 'string', value: 'bookPerson', text: '预定人', dictCode: '' })
            fieldList.push({ type: 'string', value: 'bookDate', text: '预定时间', dictCode: '' })
            fieldList.push({ type: 'string', value: 'photo', text: '联系电话', dictCode: '' })
            fieldList.push({ type: 'string', value: 'company', text: '客户单位', dictCode: '' })
            fieldList.push({ type: 'string', value: 'discountReason', text: '优惠理由', dictCode: '' })
            fieldList.push({ type: 'string', value: 'remark', text: '备注', dictCode: '' })
            fieldList.push({ type: 'string', value: 'bookStatus', text: '预订状态', dictCode: '' })
            fieldList.push({ type: 'string', value: 'accountType', text: '账户类型（vip）', dictCode: '' })
            this.superFieldList = fieldList
        },
        handleEdit: function (record) {
            this.$refs.modalForm.edit(record);
            this.$refs.modalForm.title = "编辑预订单：" + record.bookCode;
            this.$refs.modalForm.disableSubmit = false;
        },
        handleAdd: function () {
            this.$refs.modalForm.add();
            this.$refs.modalForm.title = "新增预订单";
            this.$refs.modalForm.disableSubmit = false;
        },
        handleShouKuan(record) {
            this.openModel = record
            this.checkModal = YuDingShouKuanList
            this.$refs.baseModal.title = '预定收款'
            this.$refs.baseModal.show(record)
        },
        handleDeleteCheck(record) {
            const that = this
            this.$confirm({
                title: '确定删除吗?',
                content: '确定删除这条预订单吗？预订单号：' + record.bookCode,
                onCancel() { },
                onOk() {
                    that.handleDelete(record.id)
                },
            });
        },
        handleFangJianCheck(record) {
            const that = this
            if (record.bookStatus === '00') {
                this.$confirm({
                    title: '确定分配房间吗?',
                    content: '这条预订单未确认，是否继续分配房间？预订单号：' + record.bookCode,
                    onCancel() { },
                    onOk() {
                        that.handleFangJian(record)
                    },
                });
            } else {
                that.handleFangJian(record)
            }
        },
        handleFangJian(record) {
            this.openModel = record
            this.checkModal = YuDingFangJianList
            this.$refs.baseModal.title = '预定分配房间'
            this.$refs.baseModal.show(record)
        },
        handleQuXiaoFenFang() {
            const that = this
            const bookCodes = []
            that.selectionRows.forEach(item => {
                bookCodes.push(item.bookCode)
            })
            if (that.selectionRows.length !== 0) {
                this.$confirm({
                    title: '确定取消分房吗?',
                    content: '确定取消所选预订单的分房吗？',
                    onCancel() { },
                    onOk() {
                        postAction('/room/roomBookRoom/cancelFpByBookCode?bookCodes=' + bookCodes.join(',')).then(res => {
                            if (res.success) {
                                that.$message.success('取消分房成功！');
                                that.loadData();
                            } else {
                                that.$message.error(res.message);
                            }
                        })
                    },
                });
            } else {
                this.$error({
                    title: '此功能需要至少选择一条数据！',
                })
            }
        },
        handleQuXiaoDingDan() {
            const that = this
            const bookCodes = []
            that.selectionRows.forEach(item => {
                bookCodes.push(item.bookCode)
            })
            if (that.selectionRows.length !== 0) {
                this.$confirm({
                    title: '确定取消订单吗?',
                    content: '确定取消所选预订单吗？',
                    onCancel() { },
                    onOk() {
                        postAction('/room/roomBookInfo/cancelBook?bookCodes=' + bookCodes.join(',')).then(res => {
                            if (res.success) {
                                that.$message.success('取消订单成功！');
                                that.loadData();
                            } else {
                                that.$message.error(res.message);
                            }
                        })
                    },
                });
            } else {
                this.$error({
                    title: '此功能需要至少选择一条数据！',
                })
            }
        },
        handleQueRenDingDan() {
            const that = this
            const bookCodes = []
            that.selectionRows.forEach(item => {
                bookCodes.push(item.bookCode)
            })
            if (that.selectionRows.length !== 0) {
                this.$confirm({
                    title: '确定确认订单吗?',
                    content: '确定确认所选预订单吗？',
                    onCancel() { },
                    onOk() {
                        postAction('/room/roomBookInfo/confirmBook?bookCodes=' + bookCodes.join(',')).then(res => {
                            if (res.success) {
                                that.$message.success('确认订单成功！');
                                that.loadData();
                            } else {
                                that.$message.error(res.message);
                            }
                        })
                    },
                });
            } else {
                this.$error({
                    title: '此功能需要至少选择一条数据！',
                })
            }
        },
        handleCheXiaoQueRen() {
            const that = this
            const bookCodes = []
            that.selectionRows.forEach(item => {
                bookCodes.push(item.bookCode)
            })
            if (that.selectionRows.length !== 0) {
                this.$confirm({
                    title: '确定撤销确认吗?',
                    content: '确定撤销所选预订单吗？',
                    onCancel() { },
                    onOk() {
                        postAction('/room/roomBookInfo/unConfirmBook?bookCodes=' + bookCodes.join(',')).then(res => {
                            if (res.success) {
                                that.$message.success('撤销确认成功！');
                                that.loadData();
                            } else {
                                that.$message.error(res.message);
                            }
                        })
                    },
                });
            } else {
                this.$error({
                    title: '此功能需要至少选择一条数据！',
                })
            }
        },
        handleAutoFenFang() {
            const that = this
            if (that.selectionRows.length !== 0) {
                const bookCodes = []
                that.selectionRows.forEach(item => {
                    bookCodes.push(item.bookCode)
                })
                this.$confirm({
                    title: '确定自动分房吗?',
                    content: '继续执行讲为所有选定的内容执行自动分房',
                    onCancel() { },
                    onOk() {
                        postAction('/room/roomBookRoom/autoFpRoomByBookCode?bookCodes=' + bookCodes.join(',')).then(res => {
                            if (res.success) {
                                that.$message.success('自动分房成功！');
                                that.loadData();
                            } else {
                                that.$message.error(res.message);
                            }
                        })
                    },
                });
            } else {
                this.$error({
                    title: '此功能需要至少选择一条数据！',
                })
            }
        }
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

.yudingdan-table ::v-deep .ant-table-tbody td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
}

.yudingdan-table ::v-deep .ant-table-thead th {
    border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
}
</style>